<template>
  <div class="liebiao_box">
      <p class="liebiao_p">列表项2</p>
      <ul class="liebiao_ul">
          <li class="liebiao_li" v-for="(item,index) of guanggaoList" :key="index">
                <i class="liebiao_li_left">
                  <img :src="item.imgUrl" alt="">
                </i>
              <div class="liebiao_li_right">
                  <h3 class="liebiao_li_right_h">{{item.title}}</h3>
                  <p  class="liebiao_li_right_h">{{item.titlep}}</p>
                  <p  class="liebiao_li_right_h">{{item.titlepp}}</p>
                  <button  class="liebiao_li_right_h" style="color:red;">{{item.titlebtn}}</button>
              </div>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
    props:{
guanggaoList:Array
    },
    data(){
        return{
            // guanggaoList:[
            //     {
            //         id:'01',
            //         imgUrl:'https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg',
            //         title:'哈哈哈',
            //         titlep:'大数据框架房',
            //         titlepp:'大煞风景',
            //         titlebtn:'电视剧'
            //     },
            //      {
            //         id:'02',
            //         imgUrl:'https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg',
            //         title:'哈哈哈',
            //         titlep:'大数据框架房',
            //         titlepp:'大煞风景',
            //         titlebtn:'电视剧'
            //     },
            //      {
            //         id:'03',
            //        imgUrl:'https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg',
            //         title:'哈哈哈',
            //         titlep:'大数据框架房',
            //         titlepp:'大煞风景',
            //         titlebtn:'电视剧'
            //     },
            //     {
            //         id:'04',
            //         imgUrl:'https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg',
            //         title:'哈哈哈',
            //         titlep:'大数据框架房',
            //         titlepp:'大煞风景',
            //         titlebtn:'电视剧'
            //     },
            //     {
            //         id:'05',
            //         imgUrl:'https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg',
            //         title:'哈哈哈',
            //         titlep:'大数据框架房',
            //         titlepp:'大煞风景',
            //         titlebtn:'电视剧'
            //     },
            //     {
            //         id:'06',
            //          imgUrl:'https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg',
            //         title:'哈哈哈',
            //         titlep:'大数据框架房',
            //         titlepp:'大煞风景',
            //         titlebtn:'电视剧'
            //     },

            // ]

        }
    }
};
</script>

<style lang="stylus" scoped>
@import '~styles/varbles';
@import '~styles/common';
.liebiao_box
   .liebiao_p
        padding:0.3rem 0.3rem;
        background-color:$bgColor;
        color:#fff;
        font-size:.35rem;
    .liebiao_ul 
    .liebiao_li
        background:red;
        border-bottom:5px solid  #f5f5f5; 
    .liebiao_li_left
        display:block;
        padding:0 0.2rem
    .liebiao_li_left img
        width:100%;
    .liebiao_li_right
        padding:0.3rem;
        line-height:0.5rem;
        font-size:0.3rem;
        color:#fff;
    
    
</style>